﻿<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:StoreAppLib.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <Style TargetType="local:BackButton">
        <Setter Property="MinWidth" Value="0"/>
        <Setter Property="Margin" Value="0,0,0,0"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
        <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
        <Setter Property="FontWeight" Value="Light"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="ParentBackground" Value="Black"/>
        <Setter Property="FontSize" Value="26.66667"/>
        <Setter Property="Height" Value="36"/>
        <Setter Property="Width" Value="36"/>
        <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
        <Setter Property="AutomationProperties.Name" Value="Back"/>
        <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:BackButton">
                    <Grid x:Name="RootGrid" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Margin="0">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" >
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackgroundGlyph" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ArrowGlyph" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NormalGlyph" d:IsOptimized="True"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NormalGlyph" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ArrowGlyph" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackgroundGlyph" d:IsOptimized="True"/>

                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="ArrowGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0"/>
                                        <DoubleAnimation
                                            Storyboard.TargetName="NormalGlyph"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0"
                                            Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation
                            				Storyboard.TargetName="FocusVisualWhite"
                            				Storyboard.TargetProperty="Opacity"
                            				To="1"
                            				Duration="0"/>
                                        <DoubleAnimation
                            				Storyboard.TargetName="FocusVisualBlack"
                            				Storyboard.TargetProperty="Opacity"
                            				To="1"
                            				Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Margin="-1,-1,0,0">
                            <TextBlock x:Name="BackgroundGlyph" Text="&#xE0D4;" Foreground="{TemplateBinding Foreground}"/>
                            <TextBlock x:Name="NormalGlyph" Text="&#xE0BA;" Foreground="{TemplateBinding Foreground}"/>
                            <TextBlock x:Name="ArrowGlyph" Text="&#xE0C4;" Foreground="{TemplateBinding ParentBackground}" />
                        </Grid>
                        <Rectangle 
                            x:Name="FocusVisualWhite"
                            IsHitTestVisible="False"
                            Stroke="{TemplateBinding Foreground}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="1.5"/>
                        <Rectangle
                            x:Name="FocusVisualBlack"
                            IsHitTestVisible="False"
                            Stroke="{TemplateBinding ParentBackground}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="0.5"/>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:CharmSettingFlyout">
        <Setter Property="MaxWidth" Value="646" />
        <Setter Property="FlyoutWidth" Value="Narrow" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="#FF003B5D" />
        <Setter Property="TransitionOffset" Value="0" />
        <Setter Property="HeaderBackground" Value="#FF004D61" />
        <Setter Property="HeaderForeground" Value="White" />
        <Setter Property="Icon" Value="Assets/SmallLogo.png" />
        <Setter Property="HeaderText" Value="Heading" />
        <Setter Property="HeaderFontFamily" Value="Segoe UI" />
        <Setter Property="HeaderFontSize" Value="26.667" />
        <Setter Property="HeaderFontStyle" Value="Normal" />
        <Setter Property="Background" Value="White" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="BackButtonForeground" Value="White" />
        <Setter Property="HeaderRenderTransform">
            <Setter.Value>
                <TranslateTransform X="-1" Y="6"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CharmSettingFlyout">
                    <Border VerticalAlignment="Stretch" 
                                    Width="{TemplateBinding Width}"
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        Background="{TemplateBinding Background}">
                        <Grid   HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Border Height="80" 
                                            Background="{TemplateBinding HeaderBackground}"
                                            HorizontalAlignment="Stretch"
                                            Padding="10,0,10,15">
                                <Grid >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <Grid.Transitions>
                                        <TransitionCollection>
                                            <EntranceThemeTransition FromHorizontalOffset="{TemplateBinding TransitionOffset}"/>
                                        </TransitionCollection>
                                    </Grid.Transitions>
                                    <local:BackButton x:Name="BackButton"
                                                      Foreground="{TemplateBinding BackButtonForeground}"
                                                      ParentBackground="{TemplateBinding HeaderBackground}"
                                                HorizontalAlignment="Center"  VerticalAlignment="Bottom"/>

                                    <TextBlock Text="{TemplateBinding HeaderText}" 
                                               Foreground="{TemplateBinding HeaderForeground}" 
                                               FontFamily="{TemplateBinding HeaderFontFamily}"
                                               TextTrimming="WordEllipsis"
                                               TextWrapping="NoWrap"
                                               Typography.StylisticSet20="True"
                                               Typography.DiscretionaryLigatures="True"
                                               Typography.CaseSensitiveForms="True"
                                               VerticalAlignment="Bottom"
                                               Margin="0,0,10,5"
                                               LineStackingStrategy="BlockLineHeight"
                                               FontSize="{TemplateBinding HeaderFontSize}"
                                               RenderTransform="{TemplateBinding HeaderRenderTransform}"
                                               FontStyle="{TemplateBinding HeaderFontStyle}"
                                               Grid.Column="1" />

                                    <Image Grid.Column="2" Source="{TemplateBinding Icon}"  VerticalAlignment="Bottom" HorizontalAlignment="Right" Stretch="None"/>
                                </Grid>
                            </Border>

                            <ContentPresenter x:Name="Content" Grid.Row="1" 
                                              HorizontalAlignment="Stretch" 
                                              VerticalAlignment="Stretch" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


</ResourceDictionary>
